<!doctype html>
<html lang="">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- require APlayer -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
    <!-- require MetingJS -->
    <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
    <title></title>
    <style>
      #app-loading {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
      }

      .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="app-loading">
      <div class="spinner"></div>
      <!-- 简单转圈动画 -->
    </div>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <script>
      const observer = new MutationObserver(() => {
        const appElement = document.getElementById("app");
        if (appElement && appElement.innerHTML.trim() !== "") {
          // #app 已渲染内容
          document.getElementById("app-loading").remove();
          observer.disconnect(); // 停止监听
        }
      });

      // 开始监听 #app 的变化
      observer.observe(document.body, {
        childList: true,
        subtree: true,
      });
    </script>
    <script src="./public/snow.js"></script>
    <script type="text/javascript"></script>
  </body>
</html>
